<template>
    <div class="f-pa f-bclos">
        <div class="lig-build f-bavg flex-cent">
            <div class="build-img  build-0"></div>
        </div>
        <div class="lig-switch f-bclos">
            <div class="switch-tit f-brow ">
                <div class="set-tit-line f-bavg"></div>
                <div class="set-tit-name">模式切换</div>
                <div class="set-tit-line f-bavg"></div>
            </div>
            <div class="f-bavg switch-list  f-iScroll" id="switchBtn" ref="switchBtn">
                <ul class="switch-btn">
                    <li v-for="item in moduleList" :class="item.unlock==1?'active':''" :key="item.id"  @touchstart="changeModule(item.id,$event)">{{item.name}}</li>                 
                </ul>
            </div>
        </div>

         <div class=" f-bclos lig-aim " ref="aim" :class="bounce">
            <div class="flex-cent aim-logo">
                <div class="aim-logo-icon"></div>
            </div>
            <div class="f-bavg f-bclos">
                <div class="f-brow aim-tit">
                    <div class="f-bavg"></div>
                    <div class="aim-tit-name">模式详情</div>
                    <div class="f-bavg "></div>
                </div>
                <div class="f-bavg aim-floor f-iScroll"  ref="aimFloor">
                    <ul class="aim-ul">
                        <li v-for="item in moduldInfoList" :key="item.id" :class="item.state==1?'active':''">
                          <span @touchstart="changeModuleInfo(item.id)">{{item.floorNum}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="flex-cent aim-close">
                <div class="aim-close-btn" @touchstart="hideAim()"></div>
            </div>
        </div>
        <div class="nav-btn " @touchstart="showAim()" ref="navBtn"></div>
    </div>
</template>

<script>
import IScroll from 'iscroll'
export default {
  name: "Building",
  data() {
    return {
      slipChild: true,
      bounce: "", //效果样式
      infoList: "", //iscroll 插件对象
      aimFloor: "", //模式详情 iscroll 插件对象
      moduleList: [], //存放模式信息
      moduldInfoList: [] //存放 侧边栏 模式详情
    };
  },
  created: function() {
    this.getModuleList(); //获取 信息
  },
  mounted: function() {
    this.$nextTick(function() {
      this.initSwitchTouch();
      //模式切换
      this.infoList = new IScroll(this.$refs.switchBtn, {
        scrollX: true,
        scrollY: false
      });
      //模式详情
      this.aimFloor = new IScroll(this.$refs.aimFloor);
    });
  },
  updated: function() {
    this.$nextTick(function() {
      this.infoList.refresh();
      this.aimFloor.refresh();
    });
  },
  methods: {
    switchTouchMove(e) {
      e.preventDefault();
      this.$parent.slip = false;
    },
    switchTouchEnd(e) {
      e.preventDefault();
      if (this.slipChild) {
        setTimeout(() => {
          this.$parent.slip = true;
        }, 1000);
      }
    },
    initSwitchTouch() {
      this.$refs.switchBtn.addEventListener(
        "touchmove",
        this.switchTouchMove.bind(this)
      );
      this.$refs.switchBtn.addEventListener(
        "touchend",
        this.switchTouchEnd.bind(this)
      );
    },
    //获取模式切换信息
    getModuleList() {
      this.$http
        .post(
          process.env.API_HOST + "/static/building.json",
          {},
          { headers: { "Content-Type": "application/json" } }
        )
        .then(
          res => {
            this.moduleList = res.body.result;
            this.moduldInfoList = res.body.module;
          },
          error => {
            console.log(error);
          }
        );
    },
    //模式切换
    changeModule(id, e) {
      if ($(e.currentTarget).hasClass("active")) {
        return false;
      }
      this.moduleList.map(marr => {
        if (marr.id == id) {
          marr.unlock = 1;
        } else {
          marr.unlock = 0;
        }
      });
    },
    //显示侧边栏模式详情
    showAim() {
      $(this.$refs.navBtn).hide("300");
      this.bounce = "bounceIn";
      this.$parent.zoomInOut = "zoomIn";
      this.$parent.slip = false;
      this.slipChild = false;
    },
    //隐藏 侧边栏模式详情
    hideAim() {
      this.bounce = "bounceOut";
      this.$parent.zoomInOut = "zoomOut";
      this.$parent.slip = true;
      this.slipChild = true;
      $(this.$refs.navBtn).show("300");
      setTimeout(() => {
        this.bounce = "";
        this.$parent.zoomInOut = "";
      }, 1000);
    },
    //模式详情 控制开关
    changeModuleInfo(id) {
      this.moduldInfoList.find(arr => {
        if (arr.id == id) {
          if (arr.state == 0) {
            arr.state = 1;
          } else {
            arr.state = 0;
          }
        }
      });
    }
  }
};
</script>

